<template>
  <div class="team-reset-wrap">
    <div class="team-reset-ico">
      <img src="@/common/image/create-team-left.png" alt="">
    </div>
    <div class="team-reset-con">
      <h2>{{teamNamePle}}<span> / 团队设置</span></h2>
      <div class="team-reset-information">
        <el-form
          :model="teamInformationForm"
          label-position="top"
          ref="teamInformationForm"
          :hide-required-asterisk="hideRequiredAsteriskBtn"
          :rules="rulesteamInformationForm">
          <el-form-item label="团队名称" class="information-item">
            <el-input
              :placeholder="teamNamePle"
              v-model="teamInformationForm.teamName"
              autocomplete="off"
              :disabled="true"
              clearable>
            </el-input>
          </el-form-item>
          <el-form-item
            label="团队简介"
            class="information-item"
            prop="teamText">
            <el-input
            :placeholder="teamTextPla"
            v-model="teamInformationForm.teamText"
            autocomplete="off"
            clearable>
            </el-input>
          </el-form-item>
          <el-form-item class="submitbtn">
            <el-button
              type="primary"
              class="save-sub"
              @click="submitTeamItemForm('teamInformationForm')">保存</el-button>
            <el-button
              type="primary"
              class="delete-sub"
              @click="deleteTeamItemForm()">解散并删除该团队</el-button>
            <span class="submit-text">*删除后该团队将永远消失，请谨慎操作</span>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { disbandTeam, getTeamDetail, updateTeamIntro } from '@/api/team_list'
import qs from 'qs'

export default {
  inject: ['reload'],
  data () {
    return {
      teamInformationForm: {
        teamName: '',
        teamText: ''
      },
      rulesteamInformationForm: {
        teamText: [
          { required: true, message: '请输入团队简介', trigger: 'blur' },
          { max: 100, message: '简介内容不能超过100个字符' }
        ]
      },
      // 需要隐藏星号
      hideRequiredAsteriskBtn: true,
      // 团队名称
      teamNamePle: '',
      // 团队简介
      teamTextPla: ''
    }
  },
  mounted () {
    this._getTeamDetails()
  },
  methods: {
    // 修改团队简介保存按钮点击
    submitTeamItemForm (agm) {
      this.$refs[agm].validate((valid) => {
        if (valid) {
          this._updateTeamIntro()
        } else {
          return false
        }
      })
    },
    // 解散团队按钮点击
    deleteTeamItemForm () {
      this.$confirm('确定解散并删除该团队?', '消息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._disbandTeam()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消解散'
        })
      })
    },
    // 获取团队信息
    _getTeamDetails () {
      let data = qs.stringify({
        teamId: this.$route.query.id
      })
      getTeamDetail(data).then(res => {
        if (res.message.code === 0) {
          this.teamNamePle = res.data.name
          this.teamInformationForm.teamText = res.data.introduction
        }
      })
    },
    // 修改团队简介
    _updateTeamIntro () {
      let data = qs.stringify({
        teamId: this.$route.query.id,
        introduction: this.teamInformationForm.teamText
      })
      updateTeamIntro(data).then(res => {
        if (res.message.code === 0) {
          this.$message({ message: '简介修改成功！', showClose: true, type: 'success' })
          this.$router.push({ path: '/team/detail/member', query: { id: this.$route.query.id, role: this.$route.query.role } })
        } else {
          this.$message({ message: res.msg, showClose: true, type: 'error' })
        }
      })
    },
    // 解散团队
    _disbandTeam () {
      let data = qs.stringify({
        teamId: this.$route.query.id
      })
      disbandTeam(data).then(res => {
        if (res.message.code === 0) {
          this.$message({ message: '解散团队成功！', showClose: true, type: 'success' })
          this.$router.push({ path: '/project/list' })
          this.reload()
        } else {
          this.$message({ message: res.msg, showClose: true, type: 'error' })
        }
      })
    }
  }
}

</script>
<style lang="stylus">
$fontcolor = #2D323B
.team-reset-wrap
  width 100%
  margin 0 auto
  max-width 1162px
  display flex
  padding-top 64px
  .team-reset-ico
    width 124px
    height 69px
    margin-right 47px
    img
      width 100%
      height 100%
  .team-reset-con
    flex 1
    h2
      font-size 28px
      line-height 40px
      color $fontcolor
      font-weight bold
      padding 36px 0 42px
      span
        font-size 16px
        font-weight normal
    .team-reset-information
      .team-add-instructions
        font-size 14px
        line-height 22px
        color #8D9091
        width 433px
      .submitbtn
        margin-top 25px
        .save-sub
          width 122px
          padding 10px
          font-size 16px
          line-height 22px
          background #2E94F9
          border-radius 3px
        .delete-sub
          width 200px
          padding 10px
          color $fontcolor
          font-size 16px
          line-height 22px
          background #F4F7F8
          border-radius 3px
          border none
          font-weight bold
        .el-button+.el-button
          margin-left 16px
        .submit-text
          height 40px
          line-height 40px
          font-size 14px
          color #EA4236
          margin-left 18px
      .information-item
        width 433px
        .el-form-item__label
          font-size 14px
          line-height 20px
          color #2D323B
          padding 11px 0
          font-weight bold
      .item-information-email
        position relative
      .el-form-item
        margin-bottom 13px
</style>
